import { memo } from 'react';
import { ResponsivePie } from '@nivo/pie';

interface PieChartProps {
  workloadData: Array<{
    id: string | number;
    value: number;
    [key: string]: any;
  }>;
}

const PieChart = memo<PieChartProps>(({ workloadData }) => {
    console.log(workloadData);
    return (
      <div className="w-full h-[300px]  h-48 ">
        {workloadData.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <p className="text-gray-500">暂无数据</p>
          </div>
        ) : (
          <ResponsivePie
            data={workloadData}
            sortByValue
            margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
            innerRadius={0.5} 
            cornerRadius={0.5}
            activeOuterRadiusOffset={8} // 鼠标悬停时扇形外扩大小
            padAngle={0.3}
            borderWidth={1}
            borderColor={"#ffffff"}
            enableArcLinkLabels={true}
            // arcLabel={(d: { id: string | number }) => `${d.id}`}
            arcLabel={(d) => `${d.value} h`}  // 显示格式为 "id: value h"
            arcLabelsTextColor={"#ffffff"}
            // arcLabelsTextColor={{ from: 'color', modifiers: [['darker', 1.4]] }} // 标签文字颜色
            // arcLabelsRadiusOffset={0.65}
            colors={{ scheme: 'nivo' }}
            animate={true} // 是否启用动画
            motionConfig="gentle" // 动画配置
            theme={{
              labels: {
                text: {
                  fontSize: "18px",
                },
              },
              tooltip: {
                chip: {
                  borderRadius: "9999px",
                },
                container: {
                  fontSize: "12px",
                  textTransform: "capitalize",
                  borderRadius: "6px",
                },
              },

            }}

            
            role="application"
          />
        )}
      </div>
    );
  });
  
  PieChart.displayName = 'PieChart';

  export default PieChart;